<template>
  <div class="table-wrap">
    <button @click="getPirce">获取价格</button>
    <div class="table-container">
      <table>
        <tr class="t-head">
          <th>item</th>
          <th v-for="city in tableData[0].citys" :key="city">
            {{ getCityName(city.city) }}
          </th>
        </tr>
        <tr
          v-for="item in tableData"
          :key="item"
          :class="item.hasLirun ? 't-body has-border' : 't-body'"
        >
          <td>
            <span>{{ item.id.slice(0, 2) }}{{ item.name }}</span>
          </td>
          <td v-for="city in item.citys" :key="city">
            <span
              :style="{
                color: city.minPriceColor,
              }"
              >{{ city.isMinSellPrice ? "卖" : ""
              }}{{ city.sell_price_min }}</span
            >,<span :style="{ color: city.maxPriceColor }"
              >{{ city.isMaxBuyPrice ? "买" : ""
              }}{{ city.buy_price_max }}</span
            >
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import items from "./items/index";
import mock from "./items/yuanchengWeapon/mock.json";
import { getPrice } from "../request";
import { getCityName } from "../utils";
const currentData = items[3];
export default {
  emits: ["search"],
  data() {
    return {
      tableData: [
        {
          id: "CLOTH",
          citys: [
            {
              id: "chengshi1",
              minPrice: 1,
              minPriceDate: "2021-01-01",
              maxPrice: 1,
              maxPriceDate: "2021-01-01",
            },
            {
              id: "chengshi2",
              minPrice: 1,
              minPriceDate: "2021-01-01",
              maxPrice: 1,
              maxPriceDate: "2021-01-01",
            },
            {
              id: "chengsh3",
              minPrice: 1,
              minPriceDate: "2021-01-01",
              maxPrice: 1,
              maxPriceDate: "2021-01-01",
            },
            {
              id: "chengshi4",
              minPrice: 1,
              minPriceDate: "2021-01-01",
              maxPrice: 1,
              maxPriceDate: "2021-01-01",
            },
            {
              id: "chengshi5",
              minPrice: 1,
              minPriceDate: "2021-01-01",
              maxPrice: 1,
              maxPriceDate: "2021-01-01",
            },
          ],
        },
      ],
      lastGetTime: "",
    };
  },
  mounted() {
    this.complete(mock);
  },
  methods: {
    getCityName,
    complete(data) {
      const items = [];
      data.forEach((item) => {
        const id = item.item_id;
        const findIndex = items.findIndex((it) => it.id === id);
        if (findIndex > -1) {
          items[findIndex].citys.push(item);
        } else {
          items.push({
            id: id,
            citys: [item],
          });
        }
      });
      let newData = this.setColor(items);
      newData = this.setName(newData);
      console.log("newData: ", newData);
      this.tableData = newData;
    },
    setColor(data) {
      data.forEach((item) => {
        item.citys.forEach((city) => {
          const minPriceDate = city.buy_price_min_date;
          const minPriceColor = this.getColorByDate(new Date(minPriceDate));
          const maxPriceDate = city.sell_price_max_date;
          const maxPriceColor = this.getColorByDate(new Date(maxPriceDate));
          city.minPriceColor = minPriceColor;
          city.maxPriceColor = maxPriceColor;
        });
        let hasLirun = false;
        const minSellPrice = Math.min(
          ...item.citys.map((item) =>
            item.sell_price_min === 0 ? 999999999 : item.sell_price_min
          )
        );
        const maxBuyPrice = Math.max(
          ...item.citys.map((item) =>
            item.buy_price_max === 0 ? 0 : item.buy_price_max
          )
        );
        if (
          (maxBuyPrice - minSellPrice - maxBuyPrice * 0.04) * 1 >
          20 * 1000
        ) {
          hasLirun = true;
        }
        hasLirun &&
          item.citys.forEach((item) => {
            if (item.sell_price_min === minSellPrice) {
              item.isMinSellPrice = true;
            }
          });
        hasLirun &&
          item.citys.forEach((item) => {
            if (item.buy_price_max === maxBuyPrice) {
              item.isMaxBuyPrice = true;
            }
          });
        item.hasLirun = hasLirun;
      });
      return data;
    },
    // 根据id获取名称
    setName(newData) {
      newData.forEach((item) => {
        currentData.list.forEach((it) => {
          if (it.list && Array.isArray(it.list)) {
            const name = it.list.find((it) => it.id === item.id)?.name;
            if (name) {
              item.name = name;
            }
          }
        });
      });
      return newData;
    },
    // 根据时间获取颜色，离当前时间越近，颜色越深
    getColorByDate(date) {
      const now = new Date();
      let diff = (now.getTime() - date.getTime()) / 1000;
      diff = diff - 8 * 3600;
      if (diff < 3600) {
        return "#000";
      } else if (diff < 3 * 3600) {
        return "#333";
      } else if (diff < 7 * 3600) {
        return "#666";
      } else if (diff < 15 * 3600) {
        return "#999";
      } else {
        return "#ccc";
      }
    },
    async getPirce() {
      if (this.lastGetTime) {
        if (new Date().getTime() - this.lastGetTime < 60 * 1000) {
          alert("1分钟内只能获取一次");
          return;
        }
      }
      this.lastGetTime = new Date().getTime();
      const idsList = [];
      currentData.list.forEach((item) => {
        const ids = item.list.map((li) => {
          return li.id;
        });
        idsList.push(...ids);
      });
      let orderList = idsList.sort();
      orderList = orderList.filter(
        (item) => item.indexOf("T2") === -1 && item.indexOf("T3") === -1
      );
      const { data } = await getPrice({
        item: orderList.join(","),
        hasRed: true,
      });
      this.complete(data);
    },
  },
};
</script>
<style>
.table-wrap button {
  margin-bottom: 10px;
}
.table-container {
  padding-top: 20px;
}
.table-container table {
  width: 100%;
  border-collapse: collapse;
  position: relative;
}
.table-container table th {
  border: 1px solid #ddd;
}
.table-container table td {
  border: 1px solid #ddd;
}
.table-container table tr.has-border td,
.table-container table tr.has-border {
  border: 2px solid red;
}
table .t-head {
  position: fixed;
  width: 100%;
  top: 110px;
}
table .t-head th {
  width: 122px;
  background-color: #fff;
}
table .t-head th:first-of-type {
  width: 164px;
}
table .t-body td span {
}
table .t-body td:first-of-type span {
  display: block;
  width: 163px;
}
</style>
